<template>
  <div>
      <!-- v-if指令：当条件为真的时候 才会触发相关的代码 -->
      <!-- 真：加载元素  假：不加载元素 -->
      <div v-if="true">蔡徐坤</div>
      <div v-if="false">蔡徐坤</div>
      <hr>
      <!-- 
        面试常问：v-if 和 v-show 都可以让元素不显示，区别？
        v-if：不加载元素
        v-show：加载元素打那是用 css 来隐藏
       -->

       <!-- 
        v-if 和v-show 的取舍？
        v-show：把元素准备好，随时可以展示；适合元素频繁切换显示
        v-if：如果满足条件在展示；适合元素频繁切换展示
        -->
        <!-- 
          v-if：如果满足条件在展示；适合元素切换不频繁的场景
                网络请求：请求数据 未完成前不展示 ，完成后在显示
         -->

        <div v-show="false">world</div> 

        <h3>蔡徐坤的好感加分:{{score}}</h3>
        <button @click="score -= 10">-10</button>
        <button @click="score += 10">+10</button>
        <p v-if="score < 60">避而不见</p>
        <p v-else-if="score < 80">一起吃饭</p>
        <p v-else-if="score < 90">一起看电影</p>
        <p v-else>一起逛街</p>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        score: 60
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>